import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'

// 自动批量注册并导入library文件夹下的所有组件
// 使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
// 获取所有文件路径
const url = importFn.keys()

export default {
  install (app) {
    // 遍历文件路径数组
    url.forEach(element => {
      // 将遍历的文件路径放入函数中创建导入模块，提取其中的default
      const res = importFn(element).default
      // 注册
      app.component(res.name, res)
    })

    // 图片懒加载
    app.directive('lazy', {
      mounted (el, { value }) {
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              el.src = value
              // 错误图片处理
              el.onerror = () => {
                el.src = defaultImg
              }
              stop()
            }
          }
        )
      }
    })
  }
}
